import React, { useRef } from 'react'
import { SearchBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Toast } from 'antd-mobile'

const CommonSearchBar = ({ }) => {


    const searchRef = useRef()
    const navgate = useNavigate()
    const handleSearch = (content) => {

        if (content.length > 0) {

            navgate("/search?keywords=" + content)
        } else {
            Toast.show({
                content: '请输入内容！',
                position: 'top',
            })
        }
    }

    const handleBlur = () => {
        searchRef.current.clear()
    }

    return (
        <>
            <SearchBar ref={searchRef} onSearch={handleSearch} onBlur={handleBlur} placeholder='请输入内容' showCancelButton />
        </>
    )
}

export default CommonSearchBar